<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>09_自定义JS对象</title>
</head>
<body>
<table border="2px">
    <caption>商品表</caption>
    <tr>
        <th>商品名称</th>
        <th>商品价格</th>
        <th>商品库存</th>
    </tr>
</table>
<script>
    let productArr = [
        {name: 'iPhone', price: 8888, stock: 100},
        {name: 'iPad', price: 6666, stock: 200},
        {name: 'iWatch', price: 888, stock: 300},
        {name: 'Mac', price: 8888, stock: 400}
    ];

    let table = document.querySelector('table');
    for (let i = 0; i < productArr.length; i++) {
        let tr = document.createElement('tr');
        let tdName = document.createElement('td');
        let tdPrice = document.createElement('td');
        let tdStock = document.createElement('td');
        tdName.innerHTML = productArr[i].name;
        tdPrice.innerHTML = productArr[i].price;
        tdStock.innerHTML = productArr[i].stock;
        tr.append(tdName, tdPrice, tdStock);
        table.append(tr);
    }
</script>
</body>
</html>